<template>
  <div class="common-layout">
    <el-container>
      <el-aside class="Aside" width="170px">
        <el-card shadow="never">
          <div class="Aside_resource">
            <img
              width="100"
              src="https://rs.dance365.com/default_head@3x.png?imageView2/0/w/200/h/1200/format/webp/ignore-error/1"
              alt=""
            />
            <div class="Aside_resource_text">
              <div>1768382_dlWd</div>
              <el-tag color="#FF30AB"><span>Lv.1</span></el-tag>
            </div>
          </div>
          <div class="Aside_heat">
            <div class="Aside_heat_attention">
              <span>0</span>
              <span>关注</span>
            </div>
            <div class="Aside_heat_fans">
              <span>0</span>
              <span>粉丝</span>
            </div>
          </div>
        </el-card>

        <el-card shadow="never" class="resource">
          <div class="member_text" @click="gotoDynamics">
            <span>资源动态</span>
          </div>
        </el-card>

        <el-card shadow="never" class="member">
          <div class="member_text" @click="gotoMember">
            <span>我的会员</span>
          </div>
          <div class="member_text" @click="gotoWallet">
            <span>我的钱包</span>
          </div>
          <div class="member_text" @click="gotoCoupons">
            <span>我的优惠券</span>
          </div>
          <div class="member_text" @click="gotoOrder">
            <span>我买的订单</span>
          </div>
          <div class="member_text" @click="business">
            <span class="sell">我卖的</span>
            <el-icon v-if="isSell"><ArrowDown /></el-icon>
            <el-icon v-else><ArrowRight /></el-icon>
          </div>
          <div class="member_order" v-if="isSell" ref="reference">
            <div
              v-for="item in orders"
              :key="item.id"
              :class="item.isColor ? 'member_order_color' : ''"
              @click="handover(item.id, item.value)"
            >
              <span>{{ item.value }}</span>
            </div>
          </div>
          <div class="member_text" @click="gotoData">
            <span>我的资料</span>
          </div>
        </el-card>
      </el-aside>

      <el-container>
        <el-header class="Header">
          <el-card shadow="never">
            <!-- <div>{{ $route.meta.title }}</div> -->
            <div
              class="Header_title"
              v-for="tit in $route.meta.title"
              :key="tit"
            >
              <span>{{ tit }}</span>
            </div>
          </el-card>
        </el-header>
        <el-main class="Main">
          <el-card class="Main_card">
            <router-view></router-view>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'my',
})
</script>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const isActive = ref<boolean>(false)
const isSell = ref<boolean>(false)
const reference = ref()
const isColor = ref(false)
const orders = ref([
  {
    id: '1',
    value: '订单管理',
    isColor: false,
  },
  {
    id: '2',
    value: '商品管理',
    isColor: false,
  },
  {
    id: '3',
    value: '客户管理',
    isColor: false,
  },
  {
    id: '4',
    value: '代收款',
    isColor: false,
  },
  {
    id: '5',
    value: '优惠管理',
    isColor: false,
  },
  {
    id: '6',
    value: '评价管理',
    isColor: false,
  },
  {
    id: '7',
    value: '保证金',
    isColor: false,
  },
])

//跳转到资源动态
const gotoDynamics = () => {
  router.push({
    name: 'My_dynamics',
  })
}
//跳转到我的会员
const gotoMember = () => {
  router.push({
    name: 'My_member',
  })
}
//跳转到我的钱包
const gotoWallet = () => {
  router.push({
    name: 'My_wallet',
  })
}
//跳转到我的优惠券
const gotoCoupons = () => {
  router.push({
    name: 'My_coupons',
  })
}
//跳转到我买的订单
const gotoOrder = () => {
  router.push({
    name: 'My_order',
  })
}
//跳转到我买的订单
const gotoData = () => {
  router.push({
    name: 'MyData',
  })
}

//点击我卖的事件回调
const business = () => {
  isSell.value = !isSell.value
}

const handover = (id: any, value: any) => {
  orders.value.forEach((item) => {
    item.isColor = false
    if (item.id == id) {
      item.isColor = true
    }
    if (value == '订单管理') {
      router.push({
        name: 'Orders_manager',
      })
    }
    if (value == '商品管理') {
      router.push({
        name: 'Goods_manager',
      })
    }
  })
}
</script>

<style scoped lang="less">
.common-layout {
  width: 1200px;
  margin: 20px auto;

  .Aside {
    margin-right: 10px;

    .Aside_resource {
      // margin:auto;
      text-align: center;

      img {
        border-radius: 50%;
      }

      .Aside_resource_text {
        padding: 6px 0;
        margin: 0 auto;
        width: 120px;
        height: 56px;

        el-tag {
          color: #fff;
          font-weight: bold;
        }
      }
    }

    .Aside_heat {
      display: flex;
      justify-content: space-around;

      .Aside_heat_attention {
        text-align: center;
        width: 85px;
        height: 60px;
        display: flex;
        flex-direction: column;
      }

      .Aside_heat_fans {
        text-align: center;
        width: 85px;
        height: 60px;
        display: flex;
        flex-direction: column;
      }
    }
    .resource {
      padding: 5px 0;
      height: 50px;
      line-height: 50px;
      margin: 10px 0;
      span {
        margin-left: 20px;
      }
    }
    .el-card {
      --el-card-padding: 0px;
      .member_text {
        width: 100%px;
        height: 50px;
        line-height: 50px;
        span {
          margin-left: 20px;
        }
      }
      .member_text .sell {
        padding-right: 70px;
      }
      .member_order div {
        width: 170px;
        height: 40px;
        line-height: 40px;
      }
      .member_order_color {
        color: #f93684;
      }
      .member_order div:hover {
        color: #f93684;
      }
      .member_order div span {
        padding-left: 50px;
      }
      .member_text:hover {
        border-left: 4px solid #f93684;
      }
    }
  }

  .Header {
    padding: 0;
    margin-bottom: 10px;
    height: 72px;
    ::v-deep .el-card__body {
      display: flex;
      // flex-direction: column;
    }
    .Header_title {
      height: 100%;
      width: 116px;
      text-align: center;
    }
  }

  .Main {
    padding: 0;
    // background-color: pink;
  }

  .active {
    border-left: 4px solid #f93684;
  }
}
</style>
